<!--
 * @Author: whflovecn
 * @Date: 2021-04-15 10:06:30
 * @LastEditTime: 2021-05-31 20:33:24
 * @LastEditors: whflovecn
 * @Description: 
 * @FilePath: \users-manager\src\pages\main\views\main\Menu.vue
-->
<template>
  <div>
    <div :class="collapse ? 'menu-title collapse' : 'menu-title'">
      <div v-if="!collapse" class="menu-text">
        <span>功能菜单</span>
      </div>
      <div class="menu-collapse" @click="collapse = !collapse">
        <i :class="collapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'" />
      </div>
    </div>
    <el-menu
      :default-active="$store.state.activeMenu"
      :unique-opened="true"
      :collapse="collapse"
      :collapse-transition="false"
      style="background-color:#F2F2F2;"
      router
    >
      <my-menu-item v-for="item in menu" :item="item" :key="item.id" :index="item.path"></my-menu-item>
    </el-menu>
  </div>
</template>

<script>
import MenuItem from './MenuItem'
export default {
  components:{MyMenuItem:MenuItem},
  data(){
    return {
      collapse:false,
      menu:[],
      activeMenu:""
    }
  },
  mounted(){
    if (typeof this.$store.state.activeSys != 'undefined'){
      this.menu = this.$store.state.activeSys.children
    }
  },
  watch:{
    "$store.state.activeSys":function(val){
      if (typeof this.$store.state.activeSys != 'undefined'){
        this.menu = val.children
      }
    },
    "$route"(to){
      this.$store.commit('setActiveMenu',to.path)
    }
  },
}
</script>

<style lang="less" scoped>
.menu-title {
  height:48px;
  line-height: 48px;
  width:279px;
  padding-left:20px;
  background-color:#152C40;
  color: #94D7F2;
  display: flex;
}
.menu-title.collapse {
  width:44px;
}
.menu-text {
  width:100%;
}
.menu-text-hide {
  width:100%;
  span {
    visibility: hidden;
  }
}
.menu-collapse{
  width:32px;
  flex:0 0 32px;
  justify-content: flex-end;
  cursor: pointer;
}
</style>